<!--
@Description:省市区
@Author:zqy
@Date:2022-10-30 14:03:10
@Last Modified by:zqy
@Last Modified time:2022-10-30 14:03:10
-->
<template>
  <div class="cell-area-selector" :class="{ 'no-border': border === false }">
    <Cell
      :title="title"
      v-model="areaName"
      placeholder="省、市、区、街道"
      :required="required"
      :right="!disabled"
      readonly
      is-input
      :input-align="inputAlign"
      @click.stop="handleClickArea"
    >
      <!-- <slot name="right">
        <div class="icon-position"></div>
      </slot> -->
    </Cell>
    <PopArea
      v-model="areaVal"
      v-model:show="showPop"
      :field-key="fieldKey"
      @change="handleAreaChange"
      :requiredLevle="requiredLevle"
    />
  </div>
</template>

<script lang="ts">
  import PopArea from '@/components/PopArea/index.vue'
  // import { getProvinces, getAreaList } from '@/apis/dataDict'
  import { computed, reactive, toRefs, watch, defineComponent } from 'vue'
  import Cell from '../Cell/index.vue'

  export default defineComponent({
    name: 'FieldArea',
    components: { Cell, PopArea },
    props: {
      title: {
        type: String,
        default: ''
      },
      fieldKey: {
        type: String,
        default: 'code'
      }, // 地区主键字段键名：code 地区编码 ， id 地区ID
      modelValue: {
        type: Object,
        default: () => {
          return {
            provinceId: '',
            province: '',
            provinceCode: '',
            cityId: '',
            city: '',
            cityCode: '',
            districtId: '',
            district: '',
            districtCode: '',
            townId: '',
            town: '',
            townCode: ''
          }
        }
      },
      requiredLevle: {
        type: Number,
        default: 3
      }, // 必选层级
      option: {
        type: Object,
        default: () => {
          return {
            provinceId: 'provinceId',
            province: 'province',
            provinceCode: 'provinceCode',
            cityId: 'cityId',
            city: 'city',
            cityCode: 'cityCode',
            districtId: 'districtId',
            district: 'district',
            districtCode: 'districtCode',
            townId: 'townId',
            town: 'town',
            townCode: 'townCode'
          }
        }
      },
      border: {
        type: Boolean,
        default: true
      },
      required: {
        type: Boolean,
        default: true
      },
      inputAlign: {
        type: String,
        default: 'right'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    setup(props, ctx) {
      // const { proxy }: any = getCurrentInstance()
      const datas = reactive({
        showPop: false,
        areaVal: {
          provinceId: '',
          province: '',
          provinceCode: '',
          cityId: '',
          city: '',
          cityCode: '',
          districtId: '',
          district: '',
          districtCode: '',
          townId: '',
          town: '',
          townCode: ''
        }
      })
      const areaName = computed(() => {
        const province = props.modelValue[props.option.province] || ''
        const city = props.modelValue[props.option.city] || ''
        const district = props.modelValue[props.option.district] || ''
        const town = props.modelValue[props.option.town] || ''
        const tmp = [province, city, district, town]
        if (town || district) {
          return tmp.join(' ')
        } else {
          return ''
        }
      })

      // 更新Pop省市区选中值
      const setPopValue = () => {
        const areaVal: any = datas.areaVal
        for (const key in areaVal) {
          const value = (props.modelValue && props.modelValue[props.option[key]]) || ''
          areaVal[key] = value
          // this.$set(datas.areaVal, key, value)
        }
        datas.areaVal = areaVal
      }

      const handleClickArea = () => {
        datas.showPop = true
      }

      const handleAreaChange = (data: any) => {
        const newVal: any = {}
        for (const key in props.option) {
          newVal[props.option[key]] = data[key]
        }
        ctx.emit('input', newVal)
        ctx.emit('change', data)
        ctx.emit('update:modelValue', newVal)
      }

      watch(
        () => props.modelValue,
        () => {
          setPopValue()
        },
        {
          deep: true,
          immediate: true
        }
      )

      watch(
        () => datas.areaVal,
        (val) => {
          handleAreaChange(val)
        },
        {
          // deep: true,
          immediate: true
        }
      )

      return {
        ...toRefs(datas),
        areaName,
        handleClickArea,
        handleAreaChange
      }
    }
  })
</script>
<style lang="less" scoped>
  .cell-area-selector {
    width: 100%;
    // padding: 14px 16px;
    position: relative;
    box-sizing: border-box;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      left: 16px;
      right: 16px;
      bottom: 0;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    &.no-border::after {
      border-bottom: 0;
    }
    /deep/.van-cell {
      padding: 0;
      .van-field__label {
        width: auto;
        min-width: 70px;
        margin-right: 16px;
        font-size: 14px;
        color: #3c4458;
      }
      .van-field__control {
        font-size: 14px;
        color: #3c4458;
      }

      &.van-cell--required::before {
        left: -8px;
      }
    }
    /deep/ .van-field__right-icon {
      padding-right: 0;
      margin-right: 0;
      display: flex;
      align-items: center;
      .icon-position {
        width: 20px;
        height: 20px;
        background: url(~@/assets/images/icon-map.png) no-repeat;
        background-size: 20px 20px;
      }
    }
  }
</style>
